<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--移动端的缩放比例-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--引用semantic ui中cdn的css样式-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
        style="user-select: auto;">
  <!--引入css-->
  <link rel="stylesheet" href="../static/css/me.css">
  <!--引入typo.css-->
  <link rel="stylesheet" href="../static/css/typo.css">
  <!--引入动画-->
  <link rel="stylesheet" href="../static/css/animate.css">
  <!--引入代码高亮-->
  <link rel="stylesheet" href="../static/lib/prism/prism.css">
  <!--引入生成目录-->
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">

  <title>博客详情</title>

</head>
<body>

<!--======================导航======================-->
<nav class="ui inverted attached segment me-tp-mini me-shadow-small">
  <!--ui是一种写法  inverted反色,底色  attached没有圆角贴在上面  segment是一个片段-->
  <div class="ui container"> <!--container是一个容器-->
    <div class="ui secondary inverted stackable menu"> <!--让每一个a标签之间没有白线 stackable在手机端是可堆叠的-->
      <!--======================左侧导航栏======================-->
      <h2 class="ui teal header item">Blog</h2> <!--teal一种蓝色 header放在头部  item代表menu里面的每一个条目-->
      <a href="#" class="item me-mobile-hide my-item"><i class="mini home icon"></i>首页</a>  <!--都在官网的icon中-->
      <a href="#" class="item me-mobile-hide my-item"><i class="mini idea icon"></i>分类</a>
      <a href="#" class="item me-mobile-hide my-item"><i class="mini tags icon"></i>标签</a>
      <a href="#" class="item me-mobile-hide my-item"><i class="mini clone icon"></i>归档</a>
      <a href="#" class="item me-mobile-hide my-item"><i class="mini info icon"></i>关于我</a>
      <!--======================右侧导航栏======================-->
      <div class="right item me-mobile-hide my-item">
        <div class="ui icon inverted transparent input"> <!--transparent透明-->
          <input type="text " placeholder="Search....">
          <i class="search link icon"></i>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui black icon button me-top-right me-moblie-show" id="show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<!--中间内容-->
<div id="waypoint" class="me-ft-large me-container-smell animated fadeIn">
  <div class="ui container"><!--container很好的适应移动端-->
    <!--头部-->
    <div class="ui top attached segment"><!--attached上下拼接-->
      <div class="ui horizontal link list"><!--horizontalj将列变为行-->
        <div class="item">
          <img src="../static/images/11.jpg" style="width: 30px;height: 30px;" alt=""
               class="ui avatar image"><!--avatar让图片变为圆形-->
          <div class="content"><a href="#" class="header">lyf</a></div><!--content可以在图片后面加一些文字-->
        </div>
        <div class="item">
          <i class="calendar icon"></i> 2020-01-29
        </div>
        <div class="item">
          <i class="eye icon"></i> 12345
        </div>
      </div>
    </div>
    <!--图片-->
    <div class="ui attached  segment">
      <img src="../static/images/xyy.jpeg" alt="" class="ui fluid rounded image">
    </div>
    <!--正文-->
    <div class="ui attached padded js-toc-content segment">
      <div class="ui right aligned basic segment"> <!--right aligned靠右了 basic边框消失-->
        <div class="ui orange basic label">原创</div>
      </div>
      <h2 class="ui center aligned header">惹了你，我余生一直在</h2>
      <br>
      <div id="content" class="typo  typo-selection  me-padding-lr me-padding-tiny">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;花好易凋零，月圆终有缺，年少时的无知，辜负了你的深深的爱意，匆忙的年纪又把我们彼此的缘份提前落幕，而我们一起度过的那些日子，逐渐变成了一个回忆。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此去未来的路上，带着这份回忆，满是对你的思念，在岁月深处独自遗憾。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;冤有头，债有主，这辈子就是你惹了我，我决不放过你，还记得你说这句话的时候，我们刚认识不久。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黄昏下的校园，夕阳下的小路，广播里励志的歌曲。青春的模样总是如婴儿的微笑那般纯净。在那个爱情初生的年纪，白衣飘飘的你，站在那颗四季常驻的梧桐树下，春的暖阳照耀在你身上，像是童话里善良的公主，从你身旁路过的我，便一眼爱上。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你曾说过，你的第一份感情，必须也是最后一份感情，如果允许我走进你的世界，这一世，彼此都能只能是唯一，如果我不能做到就请离开。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;那时的我，和你一样坚信，不管未来怎样，即便放弃诗和远方，只要有你在，又何妨。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从此，在满是青春校园里，牵着彼此，走在黄昏夕阳里，走在夏雨秋风里。那时的岁月静好，那时的诗歌纯净，那时的校园像一座不被外界打扰的世外桃源，让我们藏匿在它的怀里，快乐的相爱，安静的守护对方。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时光荏苒，现在的我，四处漂流，陌生的城市，陌生的风雨，还有陌生的皱纹在脸上疯长，漫漫红尘路，一人匍匐的走着。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;而你留给我的回忆，除了在校园时的美好时光，还有那一道深深的伤痕，无数个夜里，我拿着你曾给的那些甜蜜的画面，独自擦拭着伤口。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;依然记得，我们毕业在那个火红的六月，你带上行囊，独自去向远方，你曾说过，我们是彼此的唯一，不管未来怎样变迁，都会从恋人走进婚姻。你让我等你两年，你一定会回来。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如今，这已是第十年，而我还在这里，兑现我们曾经的誓言，而你，已消失于茫茫人海，四处漂流的我，却把你再也找不回来。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蹉跎了这十年的岁月，拒绝了一场场风花雪月，从等你归来时的少年，到现在白发常现的中年，而你，仍是我最深的牵挂。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;花好易凋零，月圆终有缺，也许你已忘记，你的世界，我曾出现过。</p>

        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无论你记不记得，我记得你的一切，我们曾经的一切，就好……</p>


        <h2 id="tagline" class="serif ">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>

        <ol id="table">
          <li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li>
          <li><a href="#section2">排版实例</a>
            <ul>
              <li><a href="#section2-1">例1：论语学而篇第一</a></li>
              <li><a href="#section2-2">例2：英文排版</a></li>
            </ul>
          </li>
          <li><a href="#section3">附录</a>
            <ul>
              <li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li>
              <li><a href="#appendix2">开源许可</a></li>
            </ul>
          </li>
        </ol>

        <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>
        <pre><code class="language-css">p {color:red}</code></pre>

        <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
        <h4 id="dddddd">现状和如何去做：</h4>

        <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个
          OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
          Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

        <p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
        <table summary="Typo.css 的测试平台列表" class="ui table">
          <thead>
          <tr>
            <th>OS/浏览器</th>
            <th>Firefox</th>
            <th>Chrome</th>
            <th>Safari</th>
            <th>Opera</th>
            <th>IE9</th>
            <th>IE8</th>
            <th>IE7</th>
            <th>IE6</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>OS X</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
          </tr>
          <tr>
            <td>Win 7</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>-</td>
          </tr>
          <tr>
            <td>Win XP</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
            <td>-</td>
            <td>✔</td>
            <td>✔</td>
            <td>✔</td>
          </tr>
          <tr>
            <td>Ubuntu</td>
            <td>✔</td>
            <td>✔</td>
            <td>-</td>
            <td>✔</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
          </tr>
          </tbody>
        </table>

        <h4 id="的深V都是">中文排版的重点和难点</h4>

        <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em
            class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
          HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i>
          也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
        <ol>
          <li>语义：语义对应的用法和样式是否与中文排版一致</li>
          <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
        </ol>
        <p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
        <blockquote>
          <b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
        </blockquote>

        <p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目，测试平台的覆盖，特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到
          <i class="serif">Typo.css</i>
          的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i> 开发</a>。如有批评、建议和意见，也随时欢迎给在
          Github 直接提 <a
              href="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbr title="Sofish Lin, author of Typo.css"
                                                                                  role="author">我</abbr>发<a
              href="mailto:sofish@icloud.com">邮件</a>。</p>


        <h2 id="section2">二、排版实例：</h2>

        <p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的
          Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>

        <h3 id="section2-1">例1：论语学而篇第一</h3>

        <p>
          <small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（
            <time>前551年9月28日－前479年4月11日</time>
            ）
          </small>
        </p>

        <h4 id="的深V深V是">本篇引语</h4>

        <p>
          《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 </p>

        <h4 id="是的是的深V">原文</h4>

        <p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>

        <h4 id="是是大V是大V">译文</h4>

        <p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p>

        <h4 id="是的深V深V">评析</h4>

        <p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr
            title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
        </p>

        <p>
          此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>

        <p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>

        <h3 id="section2-2">例2：英文排版</h3>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry's
          standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
          make a
          type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
          remaining
          essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
          Ipsum
          passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
          Ipsum.</p>
        <blockquote>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </blockquote>

        <h4 id="是的深V深V是 ">The standard Lorem Ipsum passage, used since the 1500s</h4>

        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

        <h4 id="的深V深V是大V  ">Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>

        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
          aperiam,
          eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
          ipsam
          voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
          ratione
          voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
          adipisci
          velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          Ut enim
          ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
          commodi
          consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
          consequatur,
          vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

        <h4 id="是的深V是  ">List style in action</h4>
        <ul>
          <li>If you wish to succeed, you should use persistence as your good friend, experience as your reference,
            prudence as
            your brother and hope as your sentry.
            <p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
          </li>
          <li>Sometimes one pays most for the things one gets for nothing.
            <p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
          </li>
          <li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult
            things
            easily.
            <p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
          </li>
        </ul>

        <h4 id="的">You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that there will never have
          one
        </h4>
        <hr/>
        <p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
          <mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that
            man fails
            to succeed".
          </mark>
          You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice
          as the
          demo you're watching now. The following code is the best way to render typo in Chinese:
        </p>
        <pre><code class="language-css">
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,h2,h3,h4,h5,h6 {
    line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}

/* 现代排版：保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
    margin:1em 0 0.6em;
}</code>
</pre>

        <h3 id="section3">三、附录</h3>

        <h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
        <table summary="Typo.css 排版偏重点" class="ui table">
          <thead>
          <tr>
            <th>类型</th>
            <th>语义</th>
            <th>标签</th>
            <th>注意点</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th rowspan="15">基础标签</th>
            <td>标题</td>
            <td><code>h1</code> ～ <code>h6</code></td>
            <td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
          </tr>
          <tr>
            <td>上、下标</td>
            <td><code>sup</code>/<code>sub</code></td>
            <td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
          </tr>
          <tr>
            <td>引用</td>
            <td><code>blockquote</code></td>
            <td>显示/嵌套样式</td>
          </tr>
          <tr>
            <td>缩写</td>
            <td><code>abbr</code></td>
            <td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
          </tr>
          <tr>
            <td>分割线</td>
            <td><code>hr</code></td>
            <td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
          </tr>
          <tr>
            <td>列表</td>
            <td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
            <td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
          </tr>
          <tr>
            <td>定义列表</td>
            <td><code>dl</code></td>
            <td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
          </tr>
          <tr>
            <td>选项</td>
            <td><code>input[type=radio[, checkbox]]</code></td>
            <td>与其他 <code>form</code> 元素排版时是否居中</td>
          </tr>
          <tr>
            <td>斜体</td>
            <td><code>i</code></td>
            <td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
          </tr>
          <tr>
            <td>强调</td>
            <td><code>em</code></td>
            <td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体</td>
          </tr>
          <tr>
            <td>加强</td>
            <td><code>strong/b</code></td>
            <td>显示为粗体</td>
          </tr>
          <tr>
            <td>标记</td>
            <td><code>mark</code></td>
            <td>类似荧光笔</td>
          </tr>
          <tr>
            <td>印刷</td>
            <td><code>small</code></td>
            <td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
          </tr>
          <tr>
            <td>表格</td>
            <td><code>table</code></td>
            <td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
          </tr>
          <tr>
            <td>代码</td>
            <td><code>pre</code>/<code>code</code></td>
            <td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
          </tr>
          <tr>
            <th rowspan="5">特殊符号</th>
            <td>着重号</td>
            <td><em class="typo-em">在文字下加点</em></td>
            <td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
          </tr>
          <tr>
            <td>专名号</td>
            <td><u>林建锋</u></td>
            <td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
          </tr>
          <tr>
            <td>破折号</td>
            <td>——</td>
            <td>保持一划，而非两划</td>
          </tr>
          <tr>
            <td>人民币</td>
            <td>&yen;</td>
            <td>使用两平等线的符号，或者 HTML 实体符号 <code>&amp;yen;</code></td>
          </tr>
          <tr>
            <td>删除符</td>
            <td>
              <del>已删除（deleted）</del>
            </td>
            <td>一致化各浏览器显示，中英混排正确</td>
          </tr>
          <tr>
            <th rowspan="3">加强类</th>
            <td>专名号</td>
            <td><code>.typo-u</code></td>
            <td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
          </tr>
          <tr>
            <td>着重符</td>
            <td><code>.typo-em</code></td>
            <td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
          </tr>
          <tr>
            <td>清除浮动</td>
            <td><code>.clearfix</code></td>
            <td>与一般 CSS Reset 保持一对致 API</td>
          </tr>
          <tr>
            <th rowspan="5">注意点</th>
            <td colspan="3">（1）中英文混排行高/行距</td>
          </tr>
          <tr>
            <td colspan="3">（2）上下标在 IE 中显示效果</td>
          </tr>
          <tr>
            <td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
          </tr>
          <tr>
            <td colspan="3">（4）input 多余空间问题</td>
          </tr>
          <tr>
            <td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
          </tr>
          </tbody>
        </table>

        <h5 id="appendix2">2、开源许可</h5>
      </div>
      <!--标签-->
      <div class="ui basic segment me-padding-responsive">
        <div class="ui basic teal left pointing label">方法论</div>
      </div>
      <!--打赏-->
      <div class="ui center aligned basic segment">
        <button id="payBtn" class="ui orange basic circular button">打赏</button><!--circular弧度大的圆角-->
      </div>
      <!--二维码-->
      <div class="ui flowing pay popup transition hidden">
        <div class="ui orange basic label">
          <div class="ui small images">
            <div class="image">
              <img src="../static/images/zfb.png" class="ui rounded borded image">
              <div>支付宝</div>
            </div>
            <div class="image">
              <img src="../static/images/wx.png" class="ui rounded borded image">
              <div>微信</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--信息-->
    <div class="ui attached positive message"><!--message让颜色不一样  positive一种颜色-->
      <div class="ui middle aligned grid">
        <div class="eleven wide column">
          <ul class="list">
            <li>作者:暮阳</li>
            <li>发表时间:2020年1月30日00:24:14</li>
            <li>版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)</li>
            <li>公众号转载:请在文末添加作者公众号二维码</li>
          </ul>
        </div>
        <div class="five wide column">
          <img src="../static/images/lyf.png" style="width: 100px;height: 100px;"
               class="ui rounded right floated bordered image"><!--right floated想右浮动-->
        </div>
      </div>
    </div>
    <!--回复-->
    <div class="ui bottom attached segment" id="comment-container">
      <!--留言区-->
      <div class="ui teal segment">
        <!--表单-->
        <div class="ui threaded comments">
          <h3 class="ui dividing header" style="user-select: auto;">Comments</h3>
          <div class="comment" style="user-select: auto;">
            <a class="avatar" style="user-select: auto;">
              <img src="../static/images/11.jpg" style="user-select: auto;">
            </a>
            <div class="content" style="user-select: auto;">
              <a class="author" style="user-select: auto;">Matt</a>
              <div class="metadata" style="user-select: auto;">
                <span class="date" style="user-select: auto;">Today at 5:42PM</span>
              </div>
              <div class="text" style="user-select: auto;">
                How artistic!
              </div>
              <div class="actions" style="user-select: auto;">
                <a class="reply" style="user-select: auto;">回复</a>
              </div>
            </div>
          </div>
          <div class="comment" style="user-select: auto;">
            <a class="avatar" style="user-select: auto;">
              <img src="../static/images/11.jpg" style="user-select: auto;">
            </a>
            <div class="content" style="user-select: auto;">
              <a class="author" style="user-select: auto;">Elliot Fu</a>
              <div class="metadata" style="user-select: auto;">
                <span class="date" style="user-select: auto;">Yesterday at 12:30AM</span>
              </div>
              <div class="text" style="user-select: auto;">
                <p style="user-select: auto;">This has been very useful for my research. Thanks as well!</p>
              </div>
              <div class="actions" style="user-select: auto;">
                <a class="reply" style="user-select: auto;">回复</a>
              </div>
            </div>
            <div class="comments" style="user-select: auto;">
              <div class="comment" style="user-select: auto;">
                <a class="avatar" style="user-select: auto;">
                  <img src="../static/images/11.jpg" style="user-select: auto;">
                </a>
                <div class="content" style="user-select: auto;">
                  <a class="author" style="user-select: auto;">Jenny Hess</a>
                  <div class="metadata" style="user-select: auto;">
                    <span class="date" style="user-select: auto;">Just now</span>
                  </div>
                  <div class="text" style="user-select: auto;">
                    Elliot you are always so right :)
                  </div>
                  <div class="actions" style="user-select: auto;">
                    <a class="reply" style="user-select: auto;">回复</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="comment" style="user-select: auto;">
            <a class="avatar" style="user-select: auto;">
              <img src="../static/images/11.jpg" style="user-select: auto;">
            </a>
            <div class="content" style="user-select: auto;">
              <a class="author" style="user-select: auto;">Joe Henderson</a>
              <div class="metadata" style="user-select: auto;">
                <span class="date" style="user-select: auto;">5 days ago</span>
              </div>
              <div class="text" style="user-select: auto;">
                Dude, this is awesome. Thanks so much
              </div>
              <div class="actions" style="user-select: auto;">
                <a class="reply" style="user-select: auto;">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui form">
        <div class="field">
          <textarea name="content" placeholder="请输入评论信息......"></textarea>
        </div>
        <div class="fields">
          <div class="field me-moblie-wide me-margin-bottom-small">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input type="text" name="nickname" placeholder="姓名">
            </div>
          </div>
          <div class="field me-moblie-wide me-margin-bottom-small">
            <div class="ui left icon input">
              <i class="mail icon"></i>
              <input type="text" name="email" placeholder="邮箱">
            </div>
          </div>
          <div class="field me-moblie-wide me-margin-bottom-small">
            <button class="ui teal button me-moblie-wide"><i class="edit icon"></i>发布</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="toolbar" class="me-fixed me-right-bottom me-padding" style="display: none !important;">
  <div class="ui vertical icon buttons ">
    <button type="button" class="ui zxcvbnm  button teal">目录</button>
    <a href="#comment-container" class="ui  button teal">留言</a>
    <button class="ui icon button"><i class="wx weixin icon"></i></button>
    <div id="scrollTo" class="ui icon button"><i class="chevron up icon"></i></div>
  </div>
</div>

<div class="ui flowing toc-container popup transition hidden" style="width: 250px !important;">
 <!-- 生成目录-->
  <ol class="js-toc">

  </ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden me-padding-mini">
  <!--<img src="./static/images/jwx.png" alt="" class="ui rounded mage" style="width: 120px;height: 120px;">-->
</div>
<br>
<br>

<!--======================底部footer======================-->
<footer class="ui inverted attached segment me-ft-massive" style="height: 240px;">
  <div class="ui center aligned container"><!--center aligned 让里面的字体居中 container是一个容器带响应式效果-->
    <div class="ui inverted divided stackable grid"> <!--divided? grid相当于栅格,是一种布局16份-->
      <div class="three wide column"><!--three三个宽度 column一列-->
        <div class="ui inverted link list">
          <div class="item">
            <img src="../static/images/lyf.png" class="ui rounded image" alt="" style="width: 110px;">
            <!--rounded圆角 image图片-->
          </div>
        </div>
      </div>
      <div class="three wide column"><!--three三个宽度 column一列-->
        <h4 class="ui inverted header  me-ft-thin me-ft-spaced">最新博客</h4>
        <div class="ui inverted link list"><!--竖着的列表-->
          <a href="#" class="item">用户故事(User Stroy)</a>
          <a href="#" class="item">刻意练习</a>
          <a href="#" class="item">失败要趁早</a>
        </div>
      </div>
      <div class="three wide column"><!--three三个宽度 column一列-->
        <h4 class="ui inverted header me-ft-thin me-ft-spaced">联系我</h4>
        <div class="ui inverted link list">
          <a href="#" class="item">Email:2083298549@qq.com</a>
          <a href="#" class="item">QQ:2083298549</a>
          <a href="#" class="item">Phone:15993596769</a>
        </div>
      </div>
      <div class="seven wide column">
        <h4 class="ui inverted header me-ft-thin me-ft-spaced ">Blog</h4>
        <div class="ui inverted link list">
          <p class="me-ft-thin me-ft-spaced me-ft-opacity-mini">
            这是我的个人博客,会分享一些关于编程,学习,思考相关的经验,希望可以对每一个来到这里的朋友有所帮助!!!!</p>
        </div>
      </div>
    </div>
  </div>

  <!--线-->
  <div class="ui inverted sectioin divider"></div><!--divider代表分割线-->
  <p class="ui center aligned container me-ft-thin me-ft-spaced me-ft-opacity-tiny">Copyright @ 2019 - 2020 Blog
    Designed by Lirenmi</p>
</footer>


<script src="../static/js/jquery-2.2.4.min.js"></script>
<!--引用semantic UI中cdn的js-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"
        style="user-select: auto;"></script>
<!--引入代码高亮-->
<script src="../static/lib/prism/prism.js"></script>
<!--引入生成目录-->
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<!--引入生成二维码-->
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<!--引入页面平滑滚动-->
<script src="../static/lib/scrollTo/jquery.scrollTo.min.js"></script>
<!--引入滚动侦测-->
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>

</body>
<script>

  $(function () {

    $("#show").click(function () {
      $(".my-item").toggleClass("me-mobile-hide");
    });

    /*支付*/   /*用的是semastic ui的写法*/
    $("#payBtn").popup({
      popup: $(".pay.popup"),
      on: "click",
      position: "bottom center"
    });

    /*目录----注意:h1-h5必须要有id*/
    tocbot.init({//初始化
      //通过css选中
      tocSelector: '.js-toc',
      //生成目录的内容
      contentSelector: '.js-toc-content',
      //生成的标题级别
      headingSelector: 'h1, h2, h3, h4,h5',
      hasInnerContainers: true,
    });
    $(".zxcvbnm.button").popup({
      popup: $(".toc-container.popup"),
      on: "click",
      position: "left center"
    })

    /*二维码*/
    var qrcode = new QRCode("qrcode", {
      text: "http://localhost:63342/blog/blog.html?_ijt=mpk7v8s747cpjv91i9rvb8q5n5#",
      width: 120,
      height: 120,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    });

    $(".wx").popup({
      popup:$(".wechat-qr"),
      on:"hover",
      position:"left center"
    });

    /*页面平滑滚动*/
    $("#scrollTo").click(function(){
      $(window).scrollTo(0,500);
    });

    /*滚动侦测*/
    var waypoint = new Waypoint({
      element: document.getElementById('waypoint'),
      handler: function(direction) {
        if(direction == "down"){
            $("#toolbar").show(2000);
        }else{
          $("#toolbar").hide(500);
        }
      }
    });
  });
</script>
</html>